<template>
  <div>
    <div class="titleBackgroundColor title-border" :style="{ height:size120,lineHeight:size120 }">
      <div class="n-title-text" :style="{fontSize:size30}">问诊单</div>
    </div>
    
    <div  :style="{height: size300, marginTop: size20, marginLeft: size20, marginRight: size20}">
       <div :style="{fontSize: size15, marginBottom: size20}">02-09 21:35</div>
       <div class="divborder-solid">
           <div class="color-1" :style="{height: size50, lineHeight: size50}">
             <div style="float:left;"><img :src="an" :style="{width:size30,height:size30, marginTop: size10,marginLeft: size10}"></img></div>
             <div style="float:left;" class="color-2" :style="{fontSize: size22,marginLeft: size10}">问诊单</div>
             <div style="float:right;text-align:center;" class="color-3" :style="{fontSize: size13, height: size27,lineHeight: size27, width: size100,marginTop: size13, marginRight: size10}">点击查看</div>
           </div>
           <div :style="{fontSize: size25, marginLeft: size20, lineHeight: size50}">
               <div>患&nbsp;&nbsp;&nbsp;&nbsp;者:&nbsp;&nbsp;王兴光,  男,  39岁</div>
               <div>患者主诉:&nbsp;&nbsp;嗓子不舒服</div>
               <div>填写时间:&nbsp;&nbsp;2018-02-09</div>
           </div>
       </div>
    </div>

    <div  :style="{height: size300, marginTop: size20, marginLeft: size20, marginRight: size20}">
       <div :style="{fontSize: size15, marginBottom: size20}">02-09 21:35</div>
       <div class="divborder-solid">
           <div class="color-1" :style="{height: size50, lineHeight: size50}">
             <div style="float:left;"><img :src="an" :style="{width:size30,height:size30, marginTop: size10,marginLeft: size10}"></img></div>
             <div style="float:left;" class="color-2" :style="{fontSize: size22,marginLeft: size10}">问诊单</div>
             <div style="float:right;text-align:center;" class="color-3" :style="{fontSize: size13, height: size27,lineHeight: size27, width: size100,marginTop: size13, marginRight: size10}">点击查看</div>
           </div>
           <div :style="{fontSize: size25, marginLeft: size20, lineHeight: size50}">
               <div>患&nbsp;&nbsp;&nbsp;&nbsp;者:&nbsp;&nbsp;王兴光,  男,  39岁</div>
               <div>患者主诉:&nbsp;&nbsp;嗓子不舒服</div>
               <div>填写时间:&nbsp;&nbsp;2018-02-09</div>
           </div>
       </div>
    </div>

    <div  :style="{height: size300, marginTop: size20, marginLeft: size20, marginRight: size20}">
       <div :style="{fontSize: size15, marginBottom: size20}">01-26 13:35</div>
       <div class="divborder-solid">
           <div class="color-1" :style="{height: size50, lineHeight: size50}">
             <div style="float:left;"><img :src="an" :style="{width:size30,height:size30, marginTop: size10,marginLeft: size10}"></img></div>
             <div style="float:left;" class="color-2" :style="{fontSize: size22,marginLeft: size10}">问诊单</div>
             <div style="float:right;text-align:center;" class="color-3" :style="{fontSize: size13, height: size27,lineHeight: size27, width: size100,marginTop: size13, marginRight: size10}">点击查看</div>
           </div>
           <div class="text-div" :style="{fontSize: size25, marginLeft: size20, lineHeight: size50}">
               <div>患&nbsp;&nbsp;&nbsp;&nbsp;者:&nbsp;&nbsp;赵,  男,  39岁</div>
               <div>患者主诉:&nbsp;&nbsp;咳嗽啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊11111111111</div>
               <div>饮食情况:&nbsp;&nbsp;咳嗽</div>
               <div>填写时间:&nbsp;&nbsp;2018-02-09</div>
           </div>
       </div>
    </div>

    <div  :style="{height: size300, marginTop: size20, marginLeft: size20, marginRight: size20}">
       <div :style="{fontSize: size15, marginBottom: size20}">02-09 21:35</div>
       <div class="divborder-solid">
           <div class="color-1" :style="{height: size50, lineHeight: size50}">
             <div style="float:left;"><img :src="an" :style="{width:size30,height:size30, marginTop: size10,marginLeft: size10}"></img></div>
             <div style="float:left;" class="color-2" :style="{fontSize: size22,marginLeft: size10}">问诊单</div>
             <div style="float:right;text-align:center;" class="color-3" :style="{fontSize: size13, height: size27,lineHeight: size27, width: size100,marginTop: size13, marginRight: size10}">点击查看</div>
           </div>
           <div :style="{fontSize: size25, marginLeft: size20, lineHeight: size50}">
               <div>患&nbsp;&nbsp;&nbsp;&nbsp;者:&nbsp;&nbsp;王兴光,  男,  39岁</div>
               <div>患者主诉:&nbsp;&nbsp;嗓子不舒服</div>
               <div>填写时间:&nbsp;&nbsp;2018-02-09</div>
           </div>
       </div>
    </div>

    <div  :style="{height: size300, marginTop: size20, marginLeft: size20, marginRight: size20}">
       <div :style="{fontSize: size15, marginBottom: size20}">02-09 21:35</div>
       <div class="divborder-solid">
           <div class="color-1" :style="{height: size50, lineHeight: size50}">
             <div style="float:left;"><img :src="an" :style="{width:size30,height:size30, marginTop: size10,marginLeft: size10}"></img></div>
             <div style="float:left;" class="color-2" :style="{fontSize: size22,marginLeft: size10}">问诊单</div>
             <div style="float:right;text-align:center;" class="color-3" :style="{fontSize: size13, height: size27,lineHeight: size27, width: size100,marginTop: size13, marginRight: size10}">点击查看</div>
           </div>
           <div :style="{fontSize: size25, marginLeft: size20, lineHeight: size50}">
               <div>患&nbsp;&nbsp;&nbsp;&nbsp;者:&nbsp;&nbsp;王兴光,  男,  39岁</div>
               <div>患者主诉:&nbsp;&nbsp;嗓子不舒服</div>
               <div>填写时间:&nbsp;&nbsp;2018-02-09</div>
           </div>
       </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      an: '../../../static/an.png'
    }
  },
  mounted () {},
  computed: {
    size10 () {
      return this.clientWidth * 10 / 750 + 'px'
    },
    size13 () {
      return this.clientWidth * 13 / 750 + 'px'
    },
    size15 () {
      return this.clientWidth * 15 / 750 + 'px'
    },
    size20 () {
      return this.clientWidth * 20 / 750 + 'px'
    },
    size22 () {
      return this.clientWidth * 22 / 750 + 'px'
    },
    size25 () {
      return this.clientWidth * 25 / 750 + 'px'
    },
    size27 () {
      return this.clientWidth * 27 / 750 + 'px'
    },
    size30 () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    size40 () {
      return this.clientWidth * 40 / 750 + 'px'
    },
    size50 () {
      return this.clientWidth * 50 / 750 + 'px'
    },
    size70 () {
      return this.clientWidth * 70 / 750 + 'px'
    },
    size80 () {
      return this.clientWidth * 80 / 750 + 'px'
    },
    size60 () {
      return this.clientWidth * 60 / 750 + 'px'
    },
    size100 () {
      return this.clientWidth * 100 / 750 + 'px'
    },
    size120 () {
      return this.clientWidth * 120 / 750 + 'px'
    },
    size300 () {
      return this.clientWidth * 300 / 750 + 'px'
    }
  },
  methods: {}
}
</script>

<style>
.div-color{
    background-color: #7FFFD4
}
.color-1{
    background-color: #FFCC33
}
.color-2{
    color: #fff;
}
.color-3{
    -webkit-border-radius: 30%;
    background-color: #FF9900;
    color: #fff;
}
.divborder-solid {
    border: solid 1px black;
}
.text-div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}
</style>
